<template>
  <div class="login-container">
    <div class="logo" />
    <div class="form">
      <h1>登录</h1>
      <!-- Card 卡片 将信息聚合在卡片容器中展示 -->
      <el-card shadow="never" class="login-card">
        <!--登录表单-->
        <!-- $refs		//获取vue实例中所有含有ref属性的dom元素，如果有多个，只返回最后一个。 -->
        <!--
          model	表单数据对象	object
          rules	表单验证规则	object
        -->
        <el-form ref="form" :model="loginModel" :rules="loginRules">
          <!--
            prop	表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的，
            传入 Form 组件的 model 中的字段
          -->
          <el-form-item prop="mobile">
            <el-input v-model.trim="loginModel.mobile" placeholder="请输入手机号码" />
          </el-form-item>
          <el-form-item prop="password">
            <!-- show-password	是否显示切换密码图标 -->
            <!-- <el-input v-model.trim="loginModel.password" type="password" placeholder="请输入登录密码" /> -->
            <el-input v-model.trim="loginModel.password" autocomplete="off" show-password placeholder="请输入登录密码" />
          </el-form-item>
          <el-form-item prop="checkPass">
            <el-input v-model.trim="loginModel.checkPass" type="password" placeholder="请再次输入登录密码" />
          </el-form-item>
          <el-form-item prop="isAgree">
            <el-checkbox v-model="loginModel.isAgree">
              用户平台使用协议
            </el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="width: 350px;" type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </div>
</template>
<script>

export default {
  name: 'Login',
  data() {
    // 校验函数
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      } else {
        if (this.loginModel.checkPass !== '') {
          console.log(this.loginModel.checkPass)
          // validateField	对部分表单字段进行校验的方法	Function(props: array | string, callback: Function(errorMessage: string))
          // this.$refs.form.validateField('checkPass')
          this.$refs.form.validateField('checkPass', (errorMessage) => {
            console.log('==============>', errorMessage)
            const valid = errorMessage === ''
            console.log(valid) // true/false
          })
        }
        callback()
      }
    }
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.loginModel.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      // model	表单数据对象	object
      // rules	表单验证规则	object
      loginModel: {
        // mobile: '',
        // password: '',
        // checkPass: '',
        // isAgree: false
        // 因为开发环境为了便利，我们将用户的账户信息和密码都默认写在了页面上，但是真正的项目我们不可能将数据进行暴露出去，所以在生产环境时应该将 用户的手机号和密码抹去
        mobile: process.env.NODE_ENV === 'development' ? '13800000002' : '',
        password: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        checkPass: process.env.NODE_ENV === 'development' ? 'hm#qd@23!' : '',
        isAgree: process.env.NODE_ENV === 'development'
      },
      loginRules: {
        // required只能检查 null "" undefined
        mobile: [
          { required: true, message: '请输入手机号码', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
        password: [
          // type类型，可选值有string、number、boolean、methdod、regexp、integer、float、array、object、enum、date、url、email
          { type: 'string', required: true, message: '请输入登录密码', trigger: 'blur' },
          { min: 6, max: 20, message: '密码长度在 6 到 20 个字符之间', trigger: 'blur' },
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        isAgree: [{
          // 自定义校验规则 可以使用validator验证器来自定义校验规则
          // 验证器，可以为指定字段自定义验证函数：function(rule, value, callback, source, options)
          // rule：指向规则的对象，其中的 field 属性是当前正在校验字段的名称
          // value：当前校验字段的值
          // callback：校验结束的回调函数，不管判定成功或者失败，必须调用，校验通过则不带参数，直接调用callback()，如果校验不通过，则带一个Error错误参数，如callback(new Error(‘具体的错误提示信息’))，关于Error的用法，参考这里
          // source：调用校验的属性对象，不常用
          // options: 附加参数，不常用
          // age: {validator: validatorRange(1,100), trigger: 'blur'}
          // validatorRange: (min, max) => (rule, value, callback) =>{
          //     if(value >= min && value <= max) return callback();
          //     else return callback(new Error(`请输入${min}到${max}的数字`))
          // }
          // asyncValidator：自定义异步验证函数
          // 异步验证器，可以为指定字段自定义异步验证函数 function(rule, value, callback)
          // ElementUI组件库中表单校验默认使用的是async-validator，所以要了解ElementUI表单验证的rules规则，先了解async-validator
          // ElementUI使用的是 async-validator 这个开源库,asyncValidator校验函数内部是用 Promise 或者直接返回一个 Promise。
          // 如验证用户名是否存在
          // userName: {
          //     asyncValidator (rule, value, callback) {
          //       axios({
          //         url: '/users',
          //         params: { userName: value }
          //       }).then((data) => {
          //         callback()
          //       }, (error) => {
          //         callback(new Error(error))
          //       })
          //     }
          //   }
          validator: (rule, value, callback) => {
            console.log(value)
            // rule规则
            // value检查的数据 true/false
            // callback 函数 执行这个函数
            // 成功执行callback 失败也执行callback(错误对象 new Error(错误信息))
            value ? callback() : callback(new Error('没有勾选用户平台协议'))
          }
        }]
      }
    }
  },
  created() {
    console.log(process.env.NODE_ENV)
  },
  methods: {
    login() {
      // ref='form' 可用this.$refs.form 获取DOM对象
      // 对整个表单进行校验的方法，参数为一个回调函数。
      // 该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
      // 若不传入回调函数，则会返回一个 promise	Function(callback: Function(boolean, object))
      this.$refs.form.validate(async isOK => {
        if (isOK) {
          await this.$store.dispatch('user/login', this.loginModel)
          // Vuex 中的action 返回的promise
          // 跳转主页
          this.$router.push('/')
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style lang="scss">
.login-container {
  display: flex;
  align-items: stretch;
  height: 100vh;
  .logo {
    flex: 3;
    background: rgba(38, 72, 176) url(../../assets/common/login_back.png)
      no-repeat center / cover;
    border-top-right-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 0 100px;
    .icon {
      background: url(../../assets/common/logo.png) no-repeat 70px center /
        contain;
      width: 300px;
      height: 50px;
      margin-bottom: 50px;
    }
    p {
      color: #fff;
      font-size: 18px;
      margin-top: 20px;
      width: 300px;
      text-align: center;
    }
  }
  .form {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 176px;
    .el-card {
      border: none;
      padding: 0;
    }
    h1 {
      padding-left: 20px;
      font-size: 24px;
    }
    .el-input {
      width: 350px;
      height: 44px;
      .el-input__inner {
        background: #f4f5fb;
      }
    }
    .el-checkbox {
      color:#606266;
    }
  }
}
</style>
